<template>
  <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="clickTab">
    <el-tab-pane
        v-for="(item, index) in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
    >

    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name:"Tabs",
  data() {
    return {
      // editableTabsValue: this.$store.state.menus.editableTabsValue,
      // editableTabs: this.$store.state.menus.editableTabs
    }
  },
  computed: {
    editableTabs: {
      get() {
        return this.$store.state.menus.editableTabs
      },
      //set没写的话做删除操作的话就会报错  Computed property "editableTabsValue" was assigned to but it has no setter.
      set(val) {
        this.$store.state.menus.editableTabs = val
      }
    },
    editableTabsValue: {
      get() {
        return this.$store.state.menus.editableTabsValue
      },
      //如果这样操作的话就是删除所有的Tab标题  相当于清除了数据状态共享(state)中的editableTabs数组所有内容
      //this.$store.state.menus.editableTabs=''
      set(val) {
        this.$store.state.menus.editableTabsValue = val
      }
    }
  },
  methods: {

    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;

      //禁止删除首页标签导航
      //这里用activeName  而不是targetName 做判断 因为activeName=editableTabsValue指的是当前页面状态
      //当前页面状态==Index  侧不可删除
      if (activeName === 'Index') {
        return
      }

      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      //删除Tab栏的标签页   展示上一个标签页  不加此路由的话还是显示删除的那个标签页内容
      //activeName=上一个标签页的名字  再通过名字跳转路径
      this.$router.push({name: activeName})

    },
    clickTab (target){
    //不加这个的话高量操作不会展示内容
    //点击Tab栏名称 跳转路由 以方便展示内容
      this.$router.push({name: target.name})
    }
  }
}
</script>

<style scoped>

</style>